
import React, { memo } from 'react';

import cs from 'classnames';
import sty from './sty.module.css';

import { changeCurrentCategoryAct, getCategorySongsAction } from '../../store/actionCreators';
import { shallowEqual, useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';

const SongsCategory = (props) => {
  const { category } = useSelector(state => ({
    category: state.getIn(['songs', 'category'])
  }), shallowEqual)
  const dispatch = useDispatch();
  const selectCategory = name => {
    dispatch(changeCurrentCategoryAct(name));
    dispatch(getCategorySongsAction(1, name))
  }

  return <div className={sty.root}>
    <div className={cs(sty.arrow, 'sprite_icon2')}></div>
    <div className={sty.all}>
      <span className='link' onClick={() => selectCategory('全部')}>全部风格</span>
    </div>
    <div className={sty.category}>
      {
        category.length ? category.map((v, i) => (<div
          key={v.name}
          className={cs('flex1', 'item' + i)}
        >
          <div className={sty.left} ><i className='icon  sprite_icon2'></i>  <span>{v.name}</span>   </div>
          <div className={cs(sty.right, { last: i === 4 })}>
            {
              v.subs.map(item => <div key={item.name} className={sty.subItem} >
                <span className='link' onClick={() => {
                  selectCategory(item.name)
                  props.changeShow && props.changeShow(false)
                }} >{item.name} </span>
                <span className={sty.divider}>|</span>
              </div>)
            }
          </div>
        </div>)) : null
      }
    </div>
  </div>
}
export default memo(SongsCategory)